/**
 * 学习目标：React组件通讯 - 数据父传子 this.props
 *  注意点：
 *    1. 可以给组件传递任意类型的数据，包括虚拟DOM结构(比Vue更灵活)
 *    2. props是只读的，不允许修改props的数据(Vue的props也是只读的)
 */
import React from 'react'
import ReactDOM from 'react-dom'

// class MyCard extends React.Component {
//   render() {
//     // ❌ props 是只读的，不允许修改 props 的数据，否则会报错
//     // this.props.title = 123
//     return (
//       <section>
//         {/* 🔔 React 子组件可直接通过 this.props 获取父传子的数据 */}
//         <h3>{this.props.title}</h3>
//         <div>{this.props.content}</div>
//       </section>
//     )
//   }
// }

// 👍👍👍：函数组件的参数就是 props，可直接解构出父组件传过来的数据
function MyCard({ title, content }) {
  return (
    <section>
      {/* 🔔 React 子组件可直接通过 this.props 获取父传子的数据 */}
      <h3>{title}</h3>
      <div>{content}</div>
    </section>
  )
}

class App extends React.Component {
  render() {
    return (
      <>
        <h1>React组件通讯</h1>
        <MyCard title='居家' content={<div>居家的内容，哈哈哈</div>} />
        <MyCard title='美食' content={<div>美食的内容，呵呵呵</div>} />
        <MyCard title='旅游' content={<div>旅游的内容，嘿嘿嘿</div>} />
      </>
    )
  }
}

// 渲染组件
ReactDOM.render(<App />, document.getElementById('root'))
